<template>
	<view>
		
		<u-loading-icon v-if="refreshing" mode="semicircle" text="刷新"></u-loading-icon>
		<view>
			<u-button type="primary" text="添加计划" @click="openModal"></u-button>
		</view>
		<u-modal :show="modalShow" title="添加计划" 
			:showConfirmButton = "true" :showCancelButton="true"
			@confirm="doConfirm" @cancel="doCancel"
			:closeOnClickOverlay="true" >
			<view>
				<view style="display: flex; width: 100%; padding-bottom: 10rpx;">
					<view style="flex: 1;">标题</view>
					<view style="flex: 3;"><u--input customStyle="height:30rpx" placeholder="请输入内容" border="surround" v-model="newItem.title" ></u--input></view>
				</view>
				<view style="display: flex; width: 100%;padding-bottom: 10rpx;">
					<view style="flex: 1;">分值</view>
					<view style="flex: 3;"><u--input customStyle="height:30rpx" placeholder="请输入内容" border="surround" v-model="newItem.score" ></u--input></view>
				</view>
				<view style="display: flex; width: 100%;padding-bottom: 10rpx;">
					<view style="flex: 1;">内容</view>
					<view style="flex: 3;"><u--textarea customStyle="height:200rpx" placeholder="请输入内容"  v-model="newItem.content" ></u--textarea></view>
				</view>
			</view>
			
		
		
		</u-modal>
		<scroll-view scroll-y="true" @scrolltoupper="dorefresh" @scrolltolower="loadMoreData" lower-threshold="10" style="height: 1050rpx;">
		  <view class="cell" v-for="task in tasks" :key="task.id">
		  	<view >
		  		<u-row customStyle="margin-bottom: 10px">
		  			<u-col span="7">
		  				<view class="title">{{task.title}}</view>
		  			</u-col>
					<u-col span="2">
						<view >
							<u--input @blur="valueChange(task)" v-model="task.score" customStyle="height:15px" placeholder="分值" clearable></u--input>
						</view>
					</u-col>
					
		  			<u-col span="1">
		  				<view >
		  					<u-switch customStyle="height:30px"  v-model="task.completed" @change="change(task)" ></u-switch>
		  				</view>
		  			</u-col>
		  		</u-row>
		  	</view>
		  	<u-line></u-line>
		  	<view class="content" style="height: 170rpx;" >{{task.content}}</view>
		  	<u-line></u-line>
		  	<view class="date">{{task.createDate}}</view>
		  </view>
		</scroll-view>
		<u-loading-icon v-if="loading" text="加载更多" textSize="18"></u-loading-icon>
		
		
		<!-- <u-loading-icon v-if="refreshing" mode="semicircle" text="半圆"></u-loading-icon>
		<view>
			<scroll-view scroll-y="true" @scrolltoupper="dorefresh" @scrolltolower="loadMoreData" lower-threshold="10" style="height: 300px;">
			  <view v-for="(item, index) in list" :key="index">
				{{ item }}
			  </view>
			</scroll-view>
			
			<u-loading-icon v-if="loading" text="加载中" textSize="18"></u-loading-icon>
		</view>
		-->
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '123',
				tasks:[],
				newItem:{},
				loading:false,
				refreshing:false,
				modalShow:false,
				list:[1,2,3,4,5,6,1,2,3,4,5,6,1,2,3,4,5,6]
			}
		},
		methods: {
			doConfirm(){
				console.log(this.newItem);
				uni.request({
					method: 'POST',
				    url: 'http://localhost:33008/daily/add',
				    data: this.newItem,
				    success: (res) => {
						console.log("add success")
				    }
				});
				this.closeModal();
			},
			doCancel(){
				this.closeModal();
			},
			closeModal(){
				this.modalShow = false;
			},
			openModal(){
				this.modalShow = true;
			},
			valueChange(e){
				let data = {
					'id':e.id,
					'completed': e.completed  ? 1:0,
					'score': e.score
				};
				console.log(data);
				//实时提交完成状态和分值
				uni.request({
					method: 'POST',
				    url: 'http://localhost:33008/daily/update',
				    data: data,
				    success: (res) => {
						console.log("update success")
				    }
				});
			},
			dorefresh(){
				this.refreshing = true;
				this.getDaily();
			},
			loadMoreData(){
				this.loading = true;
				this.getDaily();
			},
			change(e){
				console.log(e);
				let data = {
					'id':e.id,
					'completed': e.completed  ? 1:0
				};
				console.log(data);
				//实时提交完成状态和分值
				uni.request({
					method: 'POST',
				    url: 'http://localhost:33008/daily/update',
				    data: data,
				    success: (res) => {
						console.log("update success")
				    }
				});

			},
			getDaily(){
				uni.request({
					method: 'GET',
				    url: 'http://localhost:33008/daily/getall',
				    success: (res) => {
						this.tasks = res.data.result;
						
						this.loading = false;
						this.refreshing = false;
				    }
				});
			}
			
		},
		onShow() {
			this.getDaily();
		}
	}
</script>

<style>
.flex-container{
	
}
	
.cell{
	
	background-color: 7f7f1;
	height: 300rpx;
	margin: 20rpx;
	padding: 20rpx;
	box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
.title{
	font-size: 34rpx;
	font-weight: bold;
}
.content{
	font-size: 30rpx;
}
.date{
	color: grey;
	text-align: right; 
	padding-right: 10rpx;
	font-size: 36rpx;
}
</style>
